<template>
    <div class="api">
        <div>
            <auth-group-list :select="true" :sub-height="135" :select-index="2" @data-list="getAuthGroupList" @change="changeAuthGroup"></auth-group-list>
        </div>
        <div>
            <div class="page-action-btn">
                <p-confirm-btn @confirm="del" v-if="UIAuth._api_admin_api_delete"></p-confirm-btn>
            </div>
            <p-table v-if="UIAuth._api_admin_api_paginate_get" v-loading="loading" :data="dataList" :sub-height="175" :show-paginate="true" v-model="paginate" :highlight-current-row="false" @paginate="getList" @selection-change="selectionChange" :row-class-name="rowClassName">
                <el-table-column prop="title" label="标题" min-width="230"></el-table-column>
                <el-table-column prop="auth_code" label="权限标识" width="300"></el-table-column>
                <el-table-column prop="visit" label="访问权限" min-width="135">
                    <template v-slot="{row}">
                        <div>
                            <el-dropdown size="medium" trigger="click" @command="edit(1,row,$event)">
                                <el-button :disabled="!UIAuth._api_admin_api_put" :type="getVisitType(row.visit)" size="mini">
                                    {{getVisitName(row.visit)}}
                                    <i class="el-icon-arrow-down el-icon--right"></i>
                                </el-button>
                                <template #dropdown>
                                    <el-dropdown-menu>
                                        <el-dropdown-item :command="apiAuth.PUBLIC">{{apiAuthName[apiAuth.PUBLIC]}}</el-dropdown-item>
                                        <el-dropdown-item :command="apiAuth.LOGIN">{{apiAuthName[apiAuth.LOGIN]}}</el-dropdown-item>
                                        <el-dropdown-item :command="apiAuth.AUTH">{{apiAuthName[apiAuth.AUTH]}}</el-dropdown-item>
                                        <el-dropdown-item :command="apiAuth.SYSTEM">{{apiAuthName[apiAuth.SYSTEM]}}</el-dropdown-item>
                                    </el-dropdown-menu>
                                </template>

                            </el-dropdown>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="is_sign" label="签名" width="63">
                    <template v-slot="{row}">
                        <el-switch :disabled="!UIAuth._api_admin_api_put" :value="row.is_sign" @change="edit(2,row,$event)" :active-value="1" :inactive-value="2" active-color="#04C504"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="router" label="接口URL" width="320"></el-table-column>
                <el-table-column prop="method" label="请求类型" width="80"></el-table-column>
                <el-table-column prop="is_show" label="显示" width="63">
                    <template v-slot="{row}">
                        <el-switch :disabled="!UIAuth._api_admin_api_put" :value="row.is_show" @change="edit(3,row,$event)" :active-value="1" :inactive-value="2"></el-switch>
                    </template>
                </el-table-column>
                <el-table-column prop="enable" label="状态" width="63">
                    <template v-slot="{row}">
                        <el-tag v-if="row.enable==1" type="success" effect="dark" size="mini">正常</el-tag>
                        <el-tag v-else type="danger" effect="dark" size="mini">失效</el-tag>
                    </template>
                </el-table-column>
                <el-table-column prop="sort" label="排序" min-width="80"></el-table-column>
            </p-table>
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from "vue";
import { useStore } from "vuex";
import { IPaginate, defaultPaginate } from "@/lib/IApp";
import AuthGroupList from "@/components/auth/AuthGroupList.vue";
import PTable from "@/components/PTable.vue";
import http from "@/lib/http/http";
import message from "@/lib/message";
import utils from "@/lib/utils";
import PConfirmBtn from "@/components/PConfirmBtn.vue";
import ApiAuth, { ApiAuthName } from "@/lib/apiRoute/apiRoute";
/**
 * state 数据类型
 */
interface IState {
    loading: boolean;
    paginate: IPaginate;
    dataList: any[];
    tableRows: any[];
    /**
     * 菜单权限组列表
     */
    authGroupList: any;
    /**
     * 选择的菜单权限组
     */
    selectAuthGroup: any;
    /**
     * 查询条件
     */
    search: any;
}
export default defineComponent({
    name: "Api",
    components: { PTable, PConfirmBtn, AuthGroupList },
    setup() {
        const store = useStore();
        const { UIAuth, bodySize } = toRefs(store.state);
        const state = reactive<IState>({
            loading: false,
            paginate: defaultPaginate,
            dataList: [],
            tableRows: [],
            authGroupList: null,
            selectAuthGroup: null,
            search: { auth_group_id: "" },
        });
        const apiAuth = ApiAuth;
        const apiAuthName = ApiAuthName;
        /**
         *  获取当前登录用户信息
         */
        function getLoginUserInfo() {
            store.dispatch("getLoginUserInfo");
        }
        /**
         * 获取菜单权限组
         */
        function getAuthGroupList(data: any) {
            state.authGroupList = data;
        }
        /**
         * 获取内容
         */
        function getList() {
            state.loading = true;
            http.Get(
                `/api/${state.paginate.page_size}/${state.paginate.page}`,
                state.search
            )
                .then((data) => {
                    state.dataList = data.data;
                    state.paginate = data.paginate;
                    state.loading = false;
                })
                .catch((err) => (state.loading = false));
        }
        /**
         * 选择 菜单权限组
         */
        function changeAuthGroup(val: any) {
            state.dataList = [];
            state.selectAuthGroup = val;
            state.tableRows = [];
            if (val != null) {
                state.search.auth_group_id = val.id;
                getList();
            }
        }
        /**
         * 获取行的样式名称
         */
        function rowClassName({ row, rowIndex }: any): string {
            return row.enable === 1 ? "" : "api-table-row-enable";
        }
        // 多选时触发
        function selectionChange(val: any[]): void {
            state.tableRows = val;
        }
        /**
         * 删除
         */
        function del() {
            const ids: string[] = [];
            if (state.tableRows.length === 0) {
                message.error("请选择要删除的数据接口");
                return;
            }
            state.tableRows.forEach((item: any) => {
                ids.push(item.id);
            });
            message.loadingShow("删除中");
            http.Delete("/api", { ids })
                .then((data) => {
                    ids.forEach((id) => {
                        const index = state.dataList.findIndex(
                            (item) => item.id === id
                        );
                        if (index >= 0) {
                            state.dataList.splice(index, 1);
                        }
                    });
                    state.tableRows = [];
                    getLoginUserInfo();
                })
                .catch((err) => "");
        }
        /**
         * 根据访问权限返回对应名称
         */
        function getVisitName(visit: number = 1): string {
            return apiAuthName[visit];
        }
        /**
         * 根据访问权限返回对应颜色
         */
        function getVisitType(visit: number = 1): string {
            let res: string = "";
            switch (visit) {
                case apiAuth.PUBLIC:
                    res = "info";
                    break;
                case apiAuth.LOGIN:
                    res = "success";
                    break;
                case apiAuth.AUTH:
                    res = "warning";
                    break;
                case apiAuth.SYSTEM:
                    res = "danger";
                    break;
            }
            return res;
        }
        /**
         * 显示修改 type=1修改访问权限，2修改是否签名，3秀爱是否显示
         */
        function edit(type: number = 1, row: any, val: number) {
            if (Object.keys(row).length <= 0) {
                return;
            }
            let params = {
                id: row.id,
                visit: row.visit,
                is_sign: row.is_sign,
                is_show: row.is_show,
            };
            if (type === 1) {
                params = {
                    id: row.id,
                    visit: val,
                    is_sign: row.is_sign,
                    is_show: row.is_show,
                };
            }
            if (type === 2) {
                params = {
                    id: row.id,
                    visit: row.visit,
                    is_sign: val,
                    is_show: row.is_show,
                };
            }
            if (type === 3) {
                params = {
                    id: row.id,
                    visit: row.visit,
                    is_sign: row.is_sign,
                    is_show: val,
                };
            }
            http.Put("/api", params)
                .then((data) => {
                    const index = state.dataList.findIndex(
                        (item) => item.id === row.id
                    );
                    if (index >= 0) {
                        if (type === 1) {
                            state.dataList[index].visit = params.visit;
                        }
                        if (type === 2) {
                            state.dataList[index].is_sign = params.is_sign;
                        }
                        if (type === 3) {
                            state.dataList[index].is_show = params.is_show;
                        }
                    }
                    getLoginUserInfo();
                })
                .catch((err) => {
                    const index = state.dataList.findIndex(
                        (item) => item.id === row.id
                    );
                    if (index >= 0) {
                        if (type === 1) {
                            state.dataList[index].visit = row.visit;
                        }
                        if (type === 2) {
                            params.is_sign = params.is_sign === 1 ? 2 : 1;
                            state.dataList[index].is_sign = params.is_sign;
                        }
                        if (type === 3) {
                            params.is_show = params.is_show === 1 ? 2 : 1;
                            state.dataList[index].is_show = params.is_show;
                        }
                    }
                });
        }
        return {
            UIAuth,
            bodySize,
            ...toRefs(state),
            apiAuthName,
            apiAuth,
            getAuthGroupList,
            changeAuthGroup,
            rowClassName,
            selectionChange,
            del,
            getVisitName,
            getVisitType,
            getList,
            edit,
        };
    },
});
</script>

<style lang="scss">
.api {
    display: flex;
    & > div {
        &:first-child {
            width: 200px;
        }
        &:last-child {
            margin-left: 10px;
            width: calc(100% - 210px);
        }
    }
}
.api .el-table .api-table-row-enable {
    & > td,
    &:hover > td {
        text-decoration: line-through;
        background-color: #ffcaca;
        //border-top: 1px #fc3b3b dashed;
        //border-bottom: 1px #fc3b3b dashed;
    }
}
</style>
